// 无缝轮播图重点：第一张图片和最后一张图片相同，当最后一张图片切换到第一张的时候，不要滑动，要瞬间切记
// 


// 模拟从后端获取图片数据，放在数组中
let imgArr = ["./imgs/1.jpeg", "./imgs/2.jpeg", "./imgs/3.jpeg", "./imgs/4.jpeg", "./imgs/5.jpeg"];

// 注意：构造函数中所有的this指向都必须是实例化出来的那个对象
class Banner {
    constructor(imgArr) {
        // 把全局变量变成属性
        // 获取相关元素节点
        this.father = document.getElementsByClassName("father")[0];
        this.imgBox = document.getElementsByClassName("img-box")[0];
        this.imgs = document.getElementsByTagName("img");
        this.pre = document.getElementsByClassName("pre")[0];
        this.next = document.getElementsByClassName("next")[0];
        this.dotted = document.getElementsByClassName("dotted")[0];
        this.li = document.getElementsByTagName("li");
        this.index = 0; //表示图片下标
        this.stop;
        this.imgArr = imgArr;

    }
    // 全局函数都变成方法
    // 入口方法
    init() {
        this.rander();
        console.log(this);
        this.stop = setTimeout(() => {
            this.move();
        }, 2000);
        this.enter();
        this.leave();
        this.clickEvent();

    }


    // 1.把图片渲染到页面中，同时渲染对应的小圆点
    rander() {
        for (let i = 0; i < this.imgArr.length; i++) {
            // 渲染图片
            this.imgBox.innerHTML += `
        <img src="${this.imgArr[i]}" alt="">
        `;
            // 渲染小圆点
            this.dotted.innerHTML += ` <li id="${i}">${i}</li>`
        }
        // 在图片盒子最后增加一张图片，和第一张相同
        this.imgBox.innerHTML += `
        <img src="${this.imgArr[0]}" alt="">
    `;
    }

    // 2.自动轮播
    // 移动图片盒子位置和对应小圆点样式
    change(index) {
        // 移动图片盒子的位置
        this.imgBox.style.left = -this.father.offsetWidth * index + "px";
        // 根据图片，调整小圆点样式
        for (let j = 0; j < this.li.length; j++) {
            this.li[j].classList.remove("max");
        }
        if (index == this.imgs.length - 1) {
            this.li[0].classList.add("max");
        } else {
            this.li[index].classList.add("max");
        }

    }
    move() {
        this.index++; //下一张
        console.log(this);
        // 当图片走到最后的时候，回到第一张
        if (this.index == this.imgs.length) {
            this.index = 0;
            // 清除过渡效果
            this.imgBox.style.transition = "none";
            // 为了解决最后一张到第二张图片之间多2s的问题
            clearInterval(this.stop);
            this.stop = setTimeout(() => {
                this.move();
            }, 0);

        } else {
            this.imgBox.style.transition = "all 1s";
            this.stop = setTimeout(() => {
                this.move();
            }, 2000);
        }

        this.change(this.index);
        // console.log("41:", this.index);

    }
    // 鼠标移入father盒子，停止自动轮播
    enter() {
        this.father.onmouseenter = () => {
            clearInterval(this.stop);
        }
    }


    // 鼠标移出father盒子，开始自动轮播
    leave() {
        this.father.onmouseleave = () => {
            this.stop = setTimeout(() => {
                this.move();
            }, 2000);
        }
    }
    clickEvent() {
        this.father.onclick =  ()=> {
            // 3.点击前后按钮进行图片切换
            // 左箭头
            if (event.target.className == "arrow pre") {
                this.index--; //图片下标减一

                if (this.index == -1) { //如果已经是第一张图片，再往前就是最后一张图片
                    this.index = this.imgs.length - 1;
                    // 清除过渡效果
                    this.imgBox.style.transition = "none";
                    // 移动图片盒子的位置
                    this.imgBox.style.left = -this.father.offsetWidth * this.index + "px";
                    setTimeout( ()=> {
                        this.index--; //上一张
                        this.imgBox.style.transition = "all 1s";
                        // 移动图片盒子的位置
                        this.imgBox.style.left = -this.father.offsetWidth * this.index + "px";
                    }, 0)


                } else {
                    this.imgBox.style.transition = "all 1s";

                }
                this.change(this.index);
            }
            // 右箭头
            if (event.target.className == "arrow next") {
                this.index++; //图片下标加一
                if (this.index == this.imgs.length) { //如果已经是最后一张图片，再往前就是第一张图片
                    this.index = 0;
                    this.imgBox.style.transition = "none";
                    // 移动图片盒子的位置
                    this.imgBox.style.left = -this.father.offsetWidth * this.index + "px";
                    setTimeout( ()=> {
                        this.index++; //下一张
                        this.imgBox.style.transition = "all 1s";
                        // 移动图片盒子的位置
                        this.imgBox.style.left = -this.father.offsetWidth * this.index + "px";
                    }, 0);
                } else {
                    this.imgBox.style.transition = "all 1s";

                }

                this.change(this.index);

            }
            // 4.点击小圆点进行图片切换
            if (event.target.localName == "li") {
                // 判断当前点击的是哪一个小圆点，才能准确的移动图片
                // 通过获取文本值(或者获取id值)，来确定当前点击的是哪一个小圆点
                this.index = event.target.innerText * 1;
                this.change(this.index);
            }

        }

    }






}

let banner = new Banner(imgArr);
banner.init();